const gulp = require('gulp'),
	htmlmin = require('gulp-htmlmin'),
	sass = require('gulp-sass'),
	cssmin = require('gulp-clean-css'),
	babel = require('gulp-babel'),
	uglify = require('gulp-uglify'),
	del = require('del'),
	connect = require('gulp-connect'),
	{ createProxyMiddleware } = require('http-proxy-middleware')
	
// 配置路径
const path = {
	htmlPath:{
		src:'./src/**/*.html',
		dest:'./dist'
	},
	cssPath:{
		src:'./src/sass/*.scss',
		dest:'./dist/sass'
	},
	jsPath:{
		src:'./src/js/*.js',
		dest:'./dist/js'
	},
	iconPath:{
		src:'./src/font/*.*',
		dest:'./dist/font'
	},
	imgPath:{
		src:'./src/img/*.*',
		dest:'./dist/img'
	},
	libPath:{
		src:'./src/lib/**/*.*',
		dest:'./dist/lib'
	},
	videoPath:{
		src:'./src/video/*.mp4',
		dest:'./dist/video'
	}
}

const { htmlPath , cssPath , jsPath , iconPath , imgPath , libPath , videoPath} = path
// 定制任务
const html = () => {
	return gulp.src(htmlPath.src)
			.pipe(htmlmin({
      removeComments: true, // 清除HTML注释
      collapseWhitespace: true, // 压缩HTML
      collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
      removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
      minifyJS: true, // 压缩页面JS
      minifyCSS: true // 压缩页面CSS 
    }))
	.pipe(gulp.dest(htmlPath.dest))
	.pipe(connect.reload())
}

const css = () => {
	return gulp.src(cssPath.src)
			.pipe(sass())
			.pipe(cssmin())
			.pipe(gulp.dest(cssPath.dest))
			.pipe(connect.reload())
}

const js = () => {
	return gulp.src(jsPath.src)
			.pipe(babel({
				presets: ['@babel/env']
			}))
			.pipe(uglify())
			.pipe(gulp.dest(jsPath.dest))
			.pipe(connect.reload())
}
const icon = () => gulp.src(iconPath.src).pipe(gulp.dest(iconPath.dest))
const img = () => gulp.src(imgPath.src).pipe(gulp.dest(imgPath.dest))
const lib = () => gulp.src(libPath.src).pipe(gulp.dest(libPath.dest))
const video = () => gulp.src(videoPath.src).pipe(gulp.dest(videoPath.dest))
const delTak = () =>del('dist')

const watch = () => {
	gulp.watch(htmlPath.src,html)
	gulp.watch(cssPath.src,css)
	gulp.watch(jsPath.src,js)
}

const server = () => {
	connect.server({
		port:2011,
		livereload:true,
		root:'dist',
		middleware(){
			return [
				createProxyMiddleware('/rap2',{
					target:'http://rap2api.taobao.org',
					changeOrigin:true,
					pathRewrite:{'^/rap2':''}	
				}),
				createProxyMiddleware('/xmyx',{
					target:'http://www.xiongmaoyouxuan.com',
					changeOrigin:true,
					pathRewrite:{'^/xmyx':''}	
				})
				
			]
		}
	})
}

module.exports.default = gulp.series(delTak,gulp.parallel(html,css,js,icon,img,lib,watch,server,video))